import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Toast } from 'antd-mobile'
import Popup from '@/components/Popup'
import LoadMore from '@/components/LoadMore'
import CommentItem from './item'
import css from './reply.module.scss'
import { commentApi } from '@/api'
export default class CommentReply extends PureComponent {
    popupRef = React.createRef()
    listRef = React.createRef()

    static propTypes = {
        comment: PropTypes.object.isRequired
    }

    state = {
        pageNum: null,
        height: 0,
        list: []
    }

    show = () => {
        this.popupRef?.current?.show()
        this.setState({
          height: window.innerHeight * 1.85 / 3  
        })
        this.getData()        
    }

    onReachEnd = () => {
        if (!this.isComplete()) {
            this.getData()
        }
    }    

    stopLoading = () => {
        this.listRef?.current?.stopLoading()
    }

    complete = () => {
        this.listRef?.current?.complete()
    }

    isComplete = () => {
        this.listRef?.current?.isComplete()
    }

    getData = async () => {
        const { comment } = this.props
        const { pageNum, list } = this.state
        try {
            const { code, data } = await commentApi.getMoreReply({
                oid: comment.oid,
                type: comment.type,
                root: comment.rpid,
                min_id: pageNum
            })
            if (code === 0 && data) {
                const { root: { replies }, cursor } = data
                const minId = cursor.min_id
                const allCount = cursor.all_count
                const maxId = cursor.max_id
                for (const reply of replies) {
                    const { rpid } = reply
                    const matchIndex = list.findIndex(re => re.rpid === rpid)
                    if (matchIndex < 0) {
                        list.push(reply)
                    }
                }
                this.setState({
                    pageNum: maxId,
                    list: [...list]
                })
                if (minId >= allCount) {
                    this.complete()
                }
            } else {
                this.complete()
            }
        } catch (error) {
            Toast.fail(error.message, 3)
        }
        this.stopLoading()
    }

    renderHeader = comment => {
        return (
            <>
                <CommentItem comment={comment} showReply={false} />
                <p className={css["count"]}>相关回复共 {comment.rcount} 条</p>
            </>
        )
    }

    onRender = (rowData) => {
        return (<CommentItem key={rowData.rpid} comment={rowData} />)
    }

    render() {
        const { comment, className } = this.props
        const { list, height } = this.state
        return (
            <Popup className={`${className || ''}`} ref={this.popupRef}>                
                <LoadMore
                    ref={this.listRef}
                    data={list} 
                    enableRefresh={false}
                    onReachEnd={this.onReachEnd} 
                    bodyScroll={false}
                    style={{
                        height,
                        overfow: 'auto'
                    }}
                    renderHeader={() => this.renderHeader(comment)}
                    renderRow={this.onRender}
                />
            </Popup>
        )
    }
}
